import { IframeController } from 'd8d-iframe-communicator';

// 测试两种方式：CSS选择器和直接HTMLIFrameElement传入

// 方式1：使用CSS选择器（传统方式，保持向后兼容）
console.log('测试方式1：CSS选择器');
const controller1 = new IframeController('#demo-iframe', {
  hostOrigin: 'https://23974.d.d8d.fun',
  // hostOrigin: '*',
  iframeId: 'demo-iframe',
});

// 方式2：直接传入HTMLIFrameElement实例
// console.log('测试方式2：直接传入HTMLIFrameElement');
// const iframeElement = document.getElementById('demo-iframe');
// const controller2 = new IframeController(iframeElement, 'https://23974.d.d8d.fun');

// 验证两种方式都能正常工作
// console.log('两种初始化方式都成功！');

// 使用controller1作为主控制器（向后兼容）
const controller = controller1;

// Bind navigation buttons
document.getElementById('back-btn').addEventListener('click', () => {
  controller.goBack();
});

document.getElementById('forward-btn').addEventListener('click', () => {
  controller.goForward();
});

// Display URL changes
const urlDisplay = document.getElementById('iframe-url');
controller.onUrlChange((url) => {
  console.log('URL变化:', url);
  urlDisplay.textContent = url;
});

// // 添加测试按钮来验证直接传入元素的功能
// const testButton = document.createElement('button');
// testButton.textContent = '测试直接传入元素';
// testButton.style.marginLeft = '10px';
// testButton.onclick = () => {
//   const iframe = document.getElementById('demo-iframe');
//   try {
//     const testController = new IframeController(iframe, 'https://23974.d.d8d.fun');
//     alert('直接传入HTMLIFrameElement成功！');
//     testController.goBack(); // 测试功能是否正常
//   } catch (error) {
//     alert('测试失败：' + error.message);
//   }
// };
// document.querySelector('.controls').appendChild(testButton);